<template>
    <div class="singer-detail-wrapper">
        <header class="singer-header">
            <v-btn icon @click="$router.go(-1)">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>


            <v-btn icon>
                <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
        </header>
        <div v-if="singerData && singerData.artist" class="basic-panel">
            
            <img class="cover" :src="singerData.artist.cover + '?imageView&thumbnail=360y320&quality=75&tostatic=0'" alt="cover" />
            <div class="decoration-panel"></div>
            <div class="basic-info">
                <img class="avatar" v-if="singerData.user && singerData.user.avatarUrl"  :src="singerData.user.avatarUrl+'?imageView&thumbnail=100y100&quality=75&tostatic=0'" alt="avatar" />
                <h3 class="singer-name">{{singerData.artist.name}}  <img class="identify-icon" v-if="singerData.identify && singerData.identify.imageUrl" :src="singerData.identify.imageUrl" /></h3>
                <div class="singer-total">
                    <span>
                        歌曲： {{singerData.artist.musicSize}} 首
                    </span>
                    <span>
                        MV： {{singerData.artist.mvSize}} 支
                    </span>
                    <span>
                        Lv： {{singerData.artist.rank.rank}} 
                    </span>
                </div>
                <p class="identify-desc" v-if="singerData.identify && singerData.identify.imageDesc" >{{singerData.identify.imageDesc}}</p>
            </div>
        </div>
        <div class="content">
           <v-tabs
                v-model="tab"
                :show-arrows="false"
                >
                <v-tab
                    v-for="item in items"
                    :key="item.tag"
                >
                    {{ item.name }} 
                    
                    <span class="num-icon" v-if="item.tag === 'songs' && singerData.artist">({{singerData.artist.musicSize}})</span>
                    <span class="num-icon" v-else-if="item.tag === 'mv' && singerData.artist">({{singerData.videoCount}})</span>
                </v-tab>
            </v-tabs>

            <v-tabs-items v-model="tab">
                <v-tab-item
                    v-for="item in items"
                    :key="item.tag"
                >
                    <v-card
                    flat
                    >
                    <div class="singer-detail-tab-items">
                        <component :is="item.tag + 'Row'" :data="singerData" @detail-click="triggerEvent" ></component>
                    </div>
                    </v-card>
                </v-tab-item>
            </v-tabs-items>
        </div>
        <Control />
    </div>
</template>
<script>

import api from '@/api';
import singerRow from '@/components/singer/singerRow';
import songsRow from '@/components/singer/songsRow';
import albumRow from '@/components/singer/albumRow';
import mvRow from '@/components/singer/mvRow';
import dynamicRow from '@/components/singer/dynamicRow'
import Control from '@/components/control/control'

export default {
    components: {
      singerRow, songsRow, albumRow, mvRow, dynamicRow, Control
    },

    data(){
        return {
            singerData: {artist: ''},
            tab: null,
            items: [

                {
                    name: '主页',
                    tag: 'singer'
                },
                {
                    name: '歌曲',
                    tag: 'songs'
                },
                {
                    name: '专辑',
                    tag: 'album'
                },
                {
                    name: '视频',
                    tag: 'mv'
                },
                {
                    name: '动态',
                    tag: 'dynamic'
                }
            ]
        }
    },
    
    methods: {

        getDetailInfo(id){
            return api.getSingerDetail(id).then(res => {
                console.log(res.data.data);
                this.singerData = res.data.data;
                return res.data.data;
            })
        },

        triggerEvent(data, type){
            if(type === 'album'){
                console.log(data);

                this.$router.push({
                    path: '/songs',
                    query: {
                        id: data.id,
                        type
                    } 
                })
            }
        }
    },
    created(){
        let id = this.$route.query.id;
        if(id) {
            this.getDetailInfo(id);
        }
    }

}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global.scss';

    .singer-detail-wrapper {

        .singer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            z-index: 1;
            width: 100%;
            background-color: rgba(255,255,255,.3);
        }   

        .basic-panel {
            position: relative;
            top: px2rem(-40);
            height: px2rem(340);
            width: 100%;
            .cover {
                position: absolute;
                width: 100%;
            }

            .decoration-panel {
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: rgba(255,255,255,.1);
            }

            .basic-info {
                position: absolute;
                bottom: px2rem(-40);
                left: 50%;
                transform: translateX(-50%);
                width: 90%;
                height: px2rem(160);
                background: #fff;
                border-radius: 10px;
                padding: px2rem(10);
                box-sizing: border-box;
                box-shadow: 0 2px 4px #ccc;

                .avatar {
                    width: px2rem(80);
                    height: px2rem(80);
                    position: absolute;
                    top: px2rem(-40);
                    left: 50%;
                    transform: translateX(-50%);
                    border-radius: 50%;
                    border: 2px solid #fff;
                }

                .singer-name {
                    text-align: center;
                    margin-top: px2rem(40);

                    .identify-icon {
                        width: px2rem(16);
                        height: px2rem(16);
                    }
                }

                .singer-total {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    margin: px2rem(4) 0;
                    span {
                        @include defaultFontSize;
                        color: #555;
                    }
                }

                .identify-desc {
                    @include defaultFontSize;
                    color: #888;
                    text-align: center;
                }
            }
        }

        .content {
            margin-top: px2rem(4);
            .v-tabs {
                .v-tabs-bar {
                    height: px2rem(32);
                    .v-tab {
                        @include defaultFontSize;
                        text-align: center;

                        .num-icon {
                            position: absolute;
                            right: 0;
                            color: rgb(124, 124, 124);
                            @include defaultFontSize; 
                        }
                    }
                }
            }

            .singer-detail-tab-items {
                background: #efeded82;
                border: 1px solid transparent;
            }

            
        }
    }
</style>